<template>
	<view class="terminal-ward-record">
		<view class="shouru-header">
			<view class="header-title">{{$t('mine.record.terminalMoney')}} ($)</view>
			<view class="header-num">{{amount}}</view>
		</view>
		<view class="listBox">
			<view class="listItem" v-for="item in recordList">
				<view class="flexStyle">
					<span> {{item.terminalName}}</span>
					<span class="redText">+{{item.amount}}</span>
				</view>
				<view class="timeStyle">{{item.createTime}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		terminalRewardList,
		sumTerminalReward
	}
	from "@/api/system/record.js"


	export default {
		data() {
			return {
				amount: '0',
				recordList: [],
				isBottom: false,
				page: 0,
				pageSize: 10,
			}
		},
		onLoad: function() {

			this.sumTerminalReward();
			this.terminalRewardList('init');
		},
		onReachBottom: function() {
			//是否到底部，如果到了底部就不用查询了
			if (!this.isBottom) {
				this.terminalRewardList();
			}
		},
		methods: {
			sumTerminalReward() {
				sumTerminalReward().then(rsp => {
					if (rsp.code == 200 && rsp.data > 0) {
						this.amount = rsp.data;

					}
				});
			},
			terminalRewardList(isInit) {
				terminalRewardList({
					'pageNum': ++this.page,
					'pageSize': this.pageSize,
				}).then(rsp => {
					if (rsp.code == 200) {
						this.recordList = this.recordList.concat(rsp.rows);
						var currentNum = this.page * this.pageSize;
						console.log("currentNum" + currentNum)
						if (currentNum >= rsp.total) {
							//全部
							if ("init" != isInit) {
								uni.showToast({
									title: this.$t('common.reachedBottom'),
									icon: 'none'
								})
							}
							this.isBottom = true;
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: #fff;
	}

	.terminal-ward-record {
		padding: 10px 12px;

		.shouru-header {
			padding: 16px 0 0 20px;
			height: 100px;
			background-color: $uni-color-primary;
			color: $uni-color-box;
			border-radius: 10px;

			.header-title {
				font-size: 14px;
				font-weight: 500;
			}

			.header-num {
				margin-top: 16px;
				line-height: 30px;
				font-size: 22px;
				font-weight: 600;
			}
		}

		.listBox {
			margin-top: 10px;

			.listItem {
				background: $uni-color-box;
				box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 12px 16px;
				font-size: 14px;
				font-weight: 400;

				.flexStyle {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.redText {
						color: $uni-color-primary;
					}
				}

				.timeStyle {
					display: inline-block;
					padding-top: 8px;
					font-weight: 400;
				}
			}
		}


	}
</style>